<template>
    <div class="page-header">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-input
                    v-model="keyword"
                    placeholder="请输入关键字(用户名, 账号)"
                    style="width:220px"
                    size="small"
                    prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                    type="primary"
                    size="small"
                    style="margin-left:10px"
                    @click="loadUsers"
                >查询</el-button>
                <el-button plain size="small" style="margin-left:10px" @click="handleAdd">新增</el-button>
            </div>
        </template>

        <el-table :data="users" size="small" border style="width: 100%">
            <el-table-column prop="name" label="用户名"></el-table-column>
            <el-table-column prop="email" label="账号"></el-table-column>
            <el-table-column prop="role.name" label="角色"></el-table-column>
            <el-table-column prop="created_at" label="创建时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-popconfirm
                        title="确认删除？"
                        @confirm="handleDel(scope.row.id, scope.row.$index)"
                    >
                        <template #reference>
                            <el-button type="text" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <user-form :user="user" v-model:dialogVisible="dialogVisible" @reload="loadUsers"></user-form>
</template>

<script setup>
import userForm from './Form.vue'
import { getUsers } from "../../api/user"
import { toRefs, reactive } from "vue"
const state = reactive({
    keyword: '',
    pageSize: 20,
    pageNum: 1,
    users: [],
    user: {},
    dialogVisible: false,
})

const handleAdd = () => {
    state.user = {}
    state.dialogVisible = true
}

const handleEdit = (row) => {
    state.user.id = row.id
    state.user.name = row.name
    state.user.email = row.email
    state.user.role_id = row.role_id
    state.dialogVisible = true
}

const handleDel = () => {
    state.dialogShow = true
}

const loadUsers = async () => {
    let data = await getUsers(state.keyword, state.pageNum, state.pageSize)
    state.users = data.users
}

loadUsers()

const { keyword, pageSize, pageNum, users, user, dialogVisible } = toRefs(state)

</script>

<style scoped>
.box-card {
    margin: 20px;
    max-height: calc(100% - 100px);
    width: calc(100% - 40px);
    box-sizing: border-box;
    overflow: auto;
}
</style>